/*
 * @Author: Wxx
 * @Date: 2022-02-24 15:51:22
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-26 16:41:09
 * @Description:
 */
import React, { Component } from "react";
import { saveCinemasList } from "../redux/actionCreator/CinemasCreator";
import store from "../redux/store";
export default class Cinemas extends Component {
  state = {
    cityName: "",
    list: store.getState().Cinemas.cinemasList,
  };
  componentDidMount() {
    this.setState({
      cityName: store.getState().City.cityName,
    });

    if (store.getState().Cinemas.cinemasList.length === 0) {
      store.dispatch(saveCinemasList());
    } else {
      console.log("缓存");
    }
    this.unsubscribe = store.subscribe(() => {
      this.setState({
        list: store.getState().Cinemas.cinemasList,
      });
    });
  }
  componentWillUnmount() {
    //取消订阅
    this.unsubscribe();
  }
  render() {
    const { cityName, list } = this.state;
    return (
      <div
        style={{ height: "calc(100vh - 60px)", overflow: "auto", padding: 16 }}
      >
        <span
          onClick={() => {
            this.props.history.push("/city");
          }}
        >
          {cityName}
        </span>
        <span
          style={{ position: "fixed", right: 16 }}
          onClick={() => {
            this.props.history.push("/cinemas/search");
          }}
        >
          搜索
        </span>
        {list.map((item) => (
          <dl key={item.cinemaId} style={{ borderBottom: "1px solid #eee" }}>
            <dt>{item.name}</dt>
            <dd style={{ fontSize: 12 }}>{item.address}</dd>
          </dl>
        ))}
      </div>
    );
  }
}
